<template>
  <!-- 语言切换 -->
  <div class="switchLanguage">
    <!-- 顶部导航 -->
    <van-nav-bar
      :title="$t('mine.switchLanguage')"
      :right-text="$t('mine.confirm')"
      left-arrow
      @click-left="$router.back()"
      @click-right="onClickSave"
    />

    <div>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell :title="$t('mine.chinese')" clickable @click="radio = 'zh'">
            <van-radio slot="right-icon" name="zh" />
          </van-cell>
          <van-cell :title="$t('mine.english')" clickable @click="radio = 'en'">
            <van-radio slot="right-icon" name="en" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
// 设置vant的多语言
import { Locale } from 'vant'
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
export default {
  data () {
    return {
      radio: Cookies.get('language')
    }
  },
  methods: {
    onClickSave () {
      if (this.radio === 'zh') {
        this.$i18n.locale = 'zh'
        Locale.use('zh-CN', zhCN)
        Cookies.set('language', 'zh')
      } else {
        this.$i18n.locale = 'en'
        Locale.use('en-US', enUS)
        Cookies.set('language', 'en')
      }
      this.$router.back()
    }
  }
}
</script>

<style>
</style>
